@import "reset";
*{
  margin: 0;
  padding: 0;
}
body{

}
.head{
  height: 162px;
  width: 720px;
  background: rgb(0,188,212);
}
.label{
  height: 49px;
  width: 720px;
  background: rgb(0,151,165);
  position: absolute;
}
.battery{
  background:url(../images/dianchi.png)no-repeat 0 0;
  width: 32px;
  height: 32px;
  position: absolute;
  margin-left: 629px;
  margin-top: 7px;
}
.signal{
  background: url(../images/xinhao.png) no-repeat 0 0;
  position: absolute;
  width: 32px;
  height: 32px;
  margin-left: 593px;
  margin-top: 7px;
}
.time{
  .overHide;
  background: url(../images/time.png) no-repeat 0 0;
  width: 56px;
  height: 25px;
  position: absolute;
  margin-left: 658px;
  margin-top: 11px;
}
.arrowhead{
  background: url(../images/jiantou.png) no-repeat 0 0;
  width: 39px;
  height: 52px;
  position: absolute;
  margin-left: 36px;
  margin-top: 83px;
}
.word{
  width: 149px;
  height: 38px;
  position: absolute;
  margin-left:287px;
  margin-top: 87px;
  font-size: 35px;
  color: white;
}
.head2{
  width: 720px;
  height: 110px;
  background: rgb(244,244,244);
  position: absolute;
  .monthDay{
    width: 280px;
    height: 64px;
    margin-left: 220px;
    margin-top: 26px;
    border: 1px solid rgb(255,87,34);
    border-radius:4px;
    .month{
      width: 140px;
      height: 64px;
      background: white;
      position: relative;
      float: left;
      .month1{
        font-size: 29px;
        color: rgb(255,87,34);
        margin-left: 58px;
        margin-top: 9px;
      }
    }
    .day{
      width: 140px;
      height: 64px;
      background: rgb(255,87,34);
      float: left;
      .day1{
        font-size: 29px;
        color: white;
        margin-left: 58px;
        margin-top: 9px;
      }
    }
  }
}
.head3{
  width: 720px;
  height: 80px;
  background: white;
  position: absolute;
  margin-top: 110px;
  border-bottom: 1px solid rgb(230,230,230);
  .day{
    background: url(../images/day.png)no-repeat 0 0;
    width: 150px;
    height: 25px;
    position: absolute;
    margin-left: 287px;
    margin-top: 30px;
  }
  .calendar{
    background: url(../images/rili.png)no-repeat 0 0;
    width: 37px;
    height: 37px;
    position: absolute;
    margin-left: 665px;
    margin-top: 21px;
  }
}
.head4{
  width: 720px;
  height: 178px;
  position: absolute;
  margin-top: 190px;
  .procedure1{
    width: 720px;
    height: 55px;
    .fen{
      .fen1{
        float: left;
        font-size: 16px;
        margin-top: 22px;
        margin-left: 29px;
        color: rgb(51,51,51);
      }
      .fen2{
        .fen1;
        margin-left: 162px;
      }
    }
  }
  .procedure2{
    width: 720px;
    height: 89px;
    background: white;
    .place1{
      background: url(../images/place1.png)no-repeat;
      width: 6px;
      height: 40px;
      position: relative;
      float: left;
      margin-left:26px;
      margin-top: 27px;
    }
    .place2{
      background: url(../images/place2.png)no-repeat;
      width: 224px;
      height: 35px;
      position: relative;
      float: left;
      margin-top: 27px;
      margin-left: 25px;
    }
    .place3{
      background: url(../images/place3.png)no-repeat;
      width: 229px;
      height: 32px;
      position: relative;
      float: left;
      margin-top: 27px;
      margin-left: 14px;
    }
    .place4{
      background: url(../images/place4.png)no-repeat;
      width: 96px;
      height: 34px;
      position: relative;
      float: left;
      margin-top: 27px;
      margin-left: 75px;
    }
  }
  .procedure3{
    width: 720px;
    height: 30px;
    .line1{
      width: 36px;
      height: 4px;
      background: rgb(233,233,233,233);
      float: left;
      margin-top: 9px;
      position: absolute;
    }
    .round1{
      width: 21px;
      height: 21px;
      background: rgb(0,188,212);
      margin-left: 36px;
      margin-top: 0;
      border-radius: 50%;
      float: left;
    }
    .line2{
      width: 191px;
      height: 4px;
      background: rgb(0,188,212);
      float: left;
      margin-top: 9px;
      position: absolute;
      margin-left: 57px;
    }
    .round2{
      .round1;
      margin-left: 191px;
    }
    .line3{
      .line2;
      background: rgb(233,233,233,233);
      margin-left: 269px;
    }
    .round3{
      .round2;
      background: rgb(233,233,233,233);
    }
    .line4{
      .line3;
      margin-left: 460px;
      width:214px;
    }
    .round4{
      .round3;
      margin-left: 190px;
    }
    .line5{
      .line1;
      margin-left: 688px;
    }

  }
}
.body1{
  width: 720px;
  height: 145px;
  background: white;
  position: absolute;
  margin-top: 368px;
  border-top: 1px solid rgb(230,230,230);
  border-bottom: 1px solid rgb(230,230,230);
  .left{
    float: left;
    width: 360px;
    height: 145px;
    .up{
      font-size: 27px;
      margin-left: 26px;
      margin-top: 34px;
      color: rgb(51,51,51);
    }
    .down{
      font-size: 20px;
      margin-top: 24px;
      color: rgb(170,170,170);
      margin-left: 26px;
    }
  }
  .right{
    float: left;
    width: 360px;
    height: 145px;
    .right1{
      font-size: 36px;
      float: left;
      color: rgb(255,87,34);
      margin-top: 70px;
      position: absolute;
      margin-left: 235px;
    }
    .right2{
      font-size: 24px;
      color: rgb(51,51,51);
      margin-top: 81px;
      margin-left: 308px;
    }
  }
}
.body2{
  .body1;
  margin-top: 513px;
}
.body3{
  .body1;
  margin-top: 658px;
}
.body4{
  .body1;
  margin-top: 803px;
}
.body5{
  .body1;
  margin-top: 948px;
}
.body6{
  .body1;
  margin-top: 1093px;
}
.body7{
  .body1;
  margin-top: 1238px;
}
.body8{
  .body1;
  margin-top: 1383px;
}
.footer{
  height: 30px;
  width: 720px;
  position: relative;
  margin-top: 1528px;
}




